<template>
    <div class="home">
        <el-container>
            <el-header>
                <div class="home_left">
                    <h4>叩丁狼电商运营平台</h4>
                    <el-icon @click="isCollapses = !isCollapses">
                        <Menu />
                    </el-icon>
                </div>
                <el-dropdown @command="commandHandle">
                    <span class="el-dropdown-link">
                        {{ userStore.username }}
                        <el-icon class="el-icon--right">
                            <arrow-down />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="index">首页</el-dropdown-item>
                            <el-dropdown-item command="logout">退出</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </el-header>
            <el-container>
                <el-aside width="fit-content">
                    <Aside />
                </el-aside>
                <el-main>
                    <RouterView></RouterView>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup lang='ts'>
import Aside from '@/components/Aside.vue'
import { Menu, ArrowDown } from '@element-plus/icons-vue'
import { provide, ref } from 'vue'
import { useUserStore } from "@/store/user"
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus';
import { logout } from '@/common'
const userStore = useUserStore()
const router = useRouter()
const isCollapses = ref(false)
provide('isCollapse', isCollapses)
const commandHandle = (command: string) => {
    if (command === 'index') {
        // 跳转到首页
        router.push('/index')
    } else if (command === 'logout') {
        // 退出登录
        logout(() => { }, () => {
            // 提示
            ElMessage.success("退出成功")
        })
        // 跳转到登录页
        router.push("/login")
    }
}
</script>
 
<style lang = "less" scoped>
.home {
    height: 100%;

    :deep(.el-header) {
        color: #fff;
        height: 70px;
        background-color: #409eff;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .home_left {
            display: flex;
            align-items: center;

            h4 {
                padding: 0 20px;
            }
        }
    }

    :deep(.el-aside) {
        height: calc(100vh - 70px);
        background-color: #304156;

        // 控制容器的滚动条的样式
        &::-webkit-scrollbar {
            width: 0;
        }
    }

    :deep(.el-menu) {
        border: 0;
    }
}
</style>